<template>
  <div>
    <Content style="text-align:right">
      <Form>
        <FormItem label="图片命名规则">
          <RadioGroup v-model.number="imageType">
            <Radio :label="1">商品条码</Radio>
            <Radio :label="2">SKUID</Radio>
          </RadioGroup>
        </FormItem>
        <Upload
            ref="refUpdateImages"
            multiple
            type="drag"
            name="binaryFile"
            :on-success="onUploadSuccess"
            :before-upload="bfUploadImages"
            :format="['png','jpg','jpeg']"
            :max-size="51200"
            :on-format-error="formatErrorImage"
            :on-exceeded-size="maxSizeImages"
            :headers="uploadHeader"
            :data="uploadParam"
            :action="uploadApi">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击或拖拽商品主图到这里</p>
              <p style="font-size:12px;color:gray;margin:10px">图片上传规则：图片名称若用商品条码命名，需保证条码的唯一性，比如6912345678.jpg，若用SKUID命名图片，请先导出商品SKUID编码，统一维护后再上传，仅支持jpg,png,jpeg图片格式，单张大小不能超时2MB
              </p>
            </div>
        </Upload>
        <ul style="margin: 15px;color:#e87f4d">
            <li v-for="(item,id) in uploadErrorText" :key="id">
                错误：{{item}}
            </li>
        </ul>
      </Form>
      <Button type="primary" @click="Submit">完成</Button>
    </Content>
  </div>
</template>
<script>
export default {
  name: 'UploadVue',
  props: {
    callbank: Function
  },
  data() {
    return {
        imageType: 1,
        importImagesShow:false,
        uploadApi: `${env_config.upload_config.api}/agrobiz-file/v1.0/upload/single/file/binary/oname`,
        uploadHeader: {
            'Authorization': 'Bearer ' + this.$store.getToken()
        },
        uploadParam: {
            catalog:'goods'
        },
        uploadErrorText: []
    }
  },
  methods: {
    //初始化
    Init() {
        this.$refs.refUpdateImages.clearFiles()
        this.uploadErrorText.length = 0
    },
    bfUploadImages(file) {
      console.log('选择文件 ->',this.excelFile)
    },
    maxSizeImages(file) {
        this.$Notice.warning({
            title: '文件过大',
            desc: `${file.name}文件大小不能超过50M`
        })
    },
    formatErrorImage(file) {
        this.$Notice.warning({
            title: '文件格式不支持',
            desc: `${file.name}文件格式不支持，请使用png,jpg,jpeg`
        })
    },
    onUploadSuccess(response, file, fileList) {
        if(response.code == 20000) {
            let imageSrc = response.data.protocol + response.data.hostName + response.data.filePath
            this.updateSkuImage(response.data.fileName, imageSrc)
        } else {
            this.$Notice.warning({
                title: '上传失败',
                desc: response.msg
            })
        }
    },
    updateSkuImage(code,skuImage) {
        let param = {
            skuImage: skuImage
        }
        if(this.imageType === 1) {
            param.eanCode = code
        } else {
            param.skuId = code
        }
        new this.$rest({
            gateway: 'agroerp',
            service: "agroerp-shop",
            url: "/v1.0/agromall/update/sku/image",
            data: {
                pojo: param
            },
            action: (res) => {
                if (res.data.code !== 20000) {
                    this.uploadErrorText.push(res.data.msg)
                }
            },
        }).put()
    },
    Submit() {
        this.callbank()
    }
  },
  created() {
    
  },
};
</script>

<style lang="less" scoped>
.cust-form {
  text-align: left !important;
}
</style>
